<template>
	<div class="layout-padding">
		<div class="header">
			<span class="ml-5">区域类型：</span>
			<el-tree-select
				v-model="areaTypeData"
				:data="objList"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				:render-after-expand="false"
				check-strictly
				filterable
				style="width: 250px"
			/>
			<span class="ml-5">时间范围：</span>
			<div>
				<el-date-picker type="daterange" v-model="date" placeholder="请选择" />
			</div>
			<el-button type="primary" icon="el-icon-search" @click="search" class="ml-5">查询</el-button>
			<el-button icon="el-icon-download" @click="exportExcel">导出报表</el-button>
		</div>
		<div class="content">
			<div class="level">
				<div style="height: 150px; width: 100%; display: flex; justify-content: space-between">
					<div
						style="border: 1px solid #ccc; width: 15%; height: 120px; display: flex; flex-direction: column; justify-content: center"
						v-for="item in data"
						:key="item"
					>
						<el-row>
							<el-col :span="24" style="text-align: center">
								<el-row>
									<el-col :span="24" style="text-align: center; margin-top: 10px; font-size: 20px; font-weight: bold">{{ item.value }}</el-col>
								</el-row>
								<el-row>
									<el-col :span="24" style="text-align: center; margin-top: 10px; font-size: 18px">{{ item.name }}</el-col>
								</el-row>
							</el-col>
						</el-row>
					</div>
				</div>

				<div class="mt-3" style="width: 100%">
					<el-table :data="tableData" height="300" style="width: 100%" border>
						<el-table-column prop="timeValue" align="center" label="时间" width="180" />
						<el-table-column prop="scop" align="center" label="系统逐时COP" />
						<el-table-column prop="scc" align="center" label="系统逐时供冷量" />
						<el-table-column prop="sec" align="center" label="系统逐时用电量" />
					</el-table>
				</div>

				<div class="mt-3" style="width: 100%">
					<el-row>
						<el-col :span="24">
							<div ref="chart1" id="chart1" style="width: 100%; height: 300px; border: #ccc 1px solid"></div>
						</el-col>
					</el-row>
				</div>

				<div class="mt-3" style="width: 100%">
					<el-row>
						<el-col :span="24">
							<div ref="chart2" id="chart2" style="width: 100%; height: 300px; border: #ccc 1px solid"></div>
						</el-col>
					</el-row>
				</div>

				<div class="mt-3" style="width: 100%">
					<el-row>
						<el-col :span="24">
							<div ref="chart3" id="chart3" style="width: 100%; height: 300px; border: #ccc 1px solid"></div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import echarts from '/@/utils/chart';
import { getEfficiency, getEfficiencyList } from '/@/api/energymanagement/energyuse/efficiency';
import { getCopAnalysisList } from '/@/api/energymanagement/energyuse/cop';
import moment from 'moment';
import * as XLSX from 'xlsx';
import ExportJsonExcel from 'js-export-excel';

const data = ref([
	{
		name: '综合COP',
		value: 0,
	},
	{
		name: '总用电量',
		value: 0,
	},
	{
		name: '平均逐时用电量',
		value: 0,
	},
	{
		name: '总冷量',
		value: 0,
	},
	{
		name: '平均逐时用冷量',
		value: 0,
	},
]);
const tableData = ref([]);
const areaTypeData = ref([
	{
		id: 1,
		name: '区域类型1',
	},
	{
		id: 2,
		name: '区域类型2',
	},
]);
const date = ref([moment().subtract(1, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]);
const initChart = (id, title, xData, yData) => {
	const chart = echarts.init(document.getElementById(id));
	const option = {
		title: {
			left: 'center',
			text: title,
		},
		grid: {
			left: '3%',
			right: '3%',
			bottom: '2%',
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			data: xData,
			axisLabel: {
				rotate: 30
			},
		},

		yAxis: {
			type: 'value',
		},
		series: [
			{
				data: yData,
				type: 'line',
			},
		],
	};
	chart.setOption(option);
};
onMounted(() => {
	search();
});
const search = () => {
	getCopAnalysisList({
		startDate: moment(date.value[0]).format('YYYY-MM-DD'),
		endDate: moment(date.value[1]).format('YYYY-MM-DD'),
	}).then((res) => {
		tableData.value = res.data;
		initChart(
			'chart1',
			'COP',
			tableData.value.map((item) => item.timeValue),
			tableData.value.map((item) => item.scop)
		);
		initChart(
			'chart2',
			'用冷量',
			tableData.value.map((item) => item.timeValue),
			tableData.value.map((item) => item.scc)
		);
		initChart(
			'chart3',
			'用电量',
			tableData.value.map((item) => item.timeValue),
			tableData.value.map((item) => item.sec)
		);
	});
	getEfficiency({
		startTime: moment(date.value[0]).format('YYYY-MM-DD'),
		endTime: moment(date.value[1]).format('YYYY-MM-DD'),
	}).then((res) => {
		data.value = [
			{
				name: '综合COP',
				value: res.data.sumCop,
			},
			{
				name: '总用电量',
				value: res.data.sumPower,
			},
			{
				name: '平均逐时用电量',
				value: res.data.sumWhenPower,
			},
			{
				name: '总冷量',
				value: res.data.sumCool,
			},
			{
				name: '平均逐时用冷量',
				value: res.data.sumWhenCool,
			},
		];
	});
};

const exportExcel = () => {
	if (tableData.value.length === 0) return useMessage().warning('暂无数据,无法导出!');
	const excelData = [];
	tableData.value.forEach((item) => {
		excelData.push({
			时间: item.timeValue,
			系统逐时COP: item.scop,
			系统逐时供冷量: item.scc,
			系统逐时用电量: item.sec,
		});
	});
	const options = {};
	options.fileName = '能效分析报表'; //表格名称
	options.datas = [
		{
			sheetData: excelData, // 表格数据
			sheetName: 'sheet',
			sheetFilter: ['时间', '系统逐时COP', '系统逐时供冷量', '系统逐时用电量'], // 表头对应的sheetData的数据
			sheetHeader: ['时间', '系统逐时COP', '系统逐时供冷量', '系统逐时用电量'], //  表头名称
			columnWidths: ['8', '6', '6', '6'], // 列宽
		},
	];
	const toExcel = new ExportJsonExcel(options);
	window.XLSX = XLSX;
	toExcel.saveExcel();
};
</script>
<style lang="scss" scoped>
.header {
	height: 60px;
	display: flex;
	padding: 20px;
	align-items: center;
	background-color: white;
}
.content {
	margin-top: 10px;
	overflow-y: scroll;
}
.level {
	margin-top: 10px;
	padding: 20px;
	width: 100%;
	background-color: white;
}
</style>
